<template>
    <div class="page">
        <van-row type="flex" justify="space-between" class="banner">
            <van-image class="banner_left" :src="require('@/assets/images/bg_banner_left.png')"/>
            <van-image class="text_img" :src="require('@/assets/images/bg_banner_text.png')"/>
        </van-row>
        <van-cell-group class="main_panel form_panel">
            <h2 class="form_title">欢迎登录</h2>
            <van-field
                    class="input_item"
                    v-model="dataForm.username"
                    clearable
                    left-icon="icon-yonghu"
                    right-icon="question-o"
                    placeholder="请输入登录手机号"
                    @click-right-icon="$toast('手机号，既购课手机号')"
            > <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="yonghu"/> </van-field>
            <van-field
                    class="input_item"
                    v-model="dataForm.captcha"
                    center
                    clearable
                    left-icon="yanzhengma"
                    placeholder="请输入短信验证码"
            >
                <van-icon class="iconfont" class-prefix="icon" slot="left-icon" name="yanzhengma"/>
                <template #button>
                    <van-button size="small" type="primary" class="send_code_btn" round :disabled="sendBtnDisabled" @click="sendMsgCode">{{sendMsgBtnTxt}}</van-button>
                </template>
            </van-field>
            <van-button
                    size="large"
                    @click="handleLogin"
                    type="warning"
                    class="submit_btn"
                    :loading="loading"
                    loading-text="提交中..."
            >登录
            </van-button>
        </van-cell-group>
    </div>
</template>

<script>
import configEnv from '_conf'
import $api from "@/api/index";
export default {
  data() {
    return {
      dataForm: {
        username: "",
        captcha:''
      },
      wait_timer:60,
      sendMsgBtnTxt:'获取验证码',
      sendBtnDisabled:false,
      captchaPath:configEnv.baseApi+'/admin/getImgCode/',
      loading: false,
    };
  },
  mounted() {
    console.log();

  },
  methods: {
    // 登录
    async handleLogin() {
      try {
        this.loading = true
        this.$store.dispatch("user/login", this.dataForm).then(res => {
          //不是学校账号 退出
          if(res.data.type!=='3'){
            this.$dialog.alert({
              title: '友情提示',
              message: '请更换成老师账号登录。',
              theme: 'round-button',
            }).then(() => {
              this.$store.dispatch("user/logout");
            });
            return false
          }
          this.$toast({
            message: res.message,
            position: "middle",
            icon: 'success',
            duration: 1500,
            onClose: () => {
              this.$router.push("/school_list_dl");
            },
          })
        }).finally( error=>{
          this.loading = false;
          this.getCaptchaImg()
        })
      } catch (error) {
        await this.$store.dispatch("user/logout");
        this.loading = false;
      }
    },
    // 发送验证码
    async sendMsgCode(){
      let res = await $api.user.sedPhoneCode({username:this.dataForm.username});
      this.loading = false;
      this.$toast(res.message)
      this.timer()
    },
    getCaptchaImg() {
      this.captchaPath = configEnv.baseApi+'/admin/getImgCode/' + new Date()
    },
    timer(){
      this.sendBtnDisabled=true
      let auth_timer = setInterval(()=>{
        this.wait_timer--;
        this.sendMsgBtnTxt = this.wait_timer+ 's后重新获取'
        if(this.wait_timer<=0){
          this.sendBtnDisabled = false
          this.sendMsgBtnTxt = '重 新 获 取'
          clearInterval(auth_timer)
        }
      },1000)
    }
  }
};
</script>

<style lang="scss" scoped>
    .form_panel {
        height: 793px;
        padding: 40px 30px;
        .form_title {
            text-align: center;
            font-size: 34px;
            font-weight: bold;
            margin-bottom: 50px;
            color: #292929;
        }
        .submit_btn {
            display: block;
            width: 530px;
            height: 81px;
            background: linear-gradient(180deg, #FF9C70 0%, #FF804E 100%);
            border-radius: 10px;
            margin: 160px auto 0;
            font-size: 28px;
        }
        .input_item {
            font-size: 28px;
            padding-left: 20px;
        }
        .van-field{
            &:after{
                left: 0;
            }
            ::v-deep .van-field__left-icon{
                margin-right: 25px;
                .iconfont{
                    font-size:30px;
                }
            }
        }
        .btn_link{
            display: block;
            text-align: center;
            font-size: 24px;
            font-weight: 500;
            color: #9B9B9B;
            margin-top: 40px;
        }
        .captcha{
            width: 192px;
            height: 60px;
            display: block;
            background-color: #ccc;
        }
        .send_code_btn{
            height: 60px;
            padding: 0 30px;
            background: linear-gradient(180deg, #64CF86 1%, #15B165 98%);
        }
    }
</style>
